<template>
	<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
		<template #default="{ node, data }">
			<span>{{ data.title }}</span>
		</template>
	</el-tree>
	<el-dialog v-model="dialogVisible" title="" :width="dialogWidth">
		<c1 v-if="showC == 1" />
		<c2 v-if="showC == 2" />
		<c3 v-if="showC == 3" />
		<c4 v-if="showC == 4" />
		<c5 v-if="showC == 5" />
		<c6 v-if="showC == 6" />
		<c7 v-if="showC == 7" />
		<c8 v-if="showC == 8" />
		<c9 v-if="showC == 9" />
		<c10 v-if="showC == 10" />
		<c11 v-if="showC == 11" />
		<c12 v-if="showC == 12" />
		<c13 v-if="showC == 13" />
		<c14 v-if="showC == 14" />
		<c16 v-if="showC == 16" />
		<c20 v-if="showC == 20" />
		<c18 v-if="showC == 18" />
		<c17 v-if="showC == 17" />
		<c19 v-if="showC == 19" />
		<c15 v-if="showC == 15" />
	</el-dialog>
</template>

<script lang="ts" setup>
import c15 from "./count/15.vue";
import c19 from "./count/19.vue";
import c17 from "./count/17.vue";
import c18 from "./count/18.vue";
import c16 from "./count/16.vue";
import c20 from "./count/20.vue";
import c14 from "./count/14.vue";
import c13 from "./count/13.vue";
import c12 from "./count/12.vue";
import c11 from "./count/11.vue";
import c10 from "./count/10.vue";
import c9 from "./count/9.vue";
import c8 from "./count/8.vue";
import c7 from "./count/7.vue";
import c6 from "./count/6.vue";
import c5 from "./count/5.vue";
import c4 from "./count/4.vue";
import c3 from "./count/3.vue";
import c2 from "./count/2.vue";
import c1 from "./count/1.vue";
import { ref } from "vue";
const dialogVisible = ref(false);
const showC = ref("1");
const dialogWidth = ref("1000px");
interface Tree {
	title: string;
	width: string;
	label: string;
	children?: Tree[];
}

const handleNodeClick = (data: Tree) => {
	console.log(data);
	if (!data.label) return;
	showC.value = data.label;
	dialogWidth.value = data.width;
	dialogVisible.value = true;
};

const data: Tree[] = [
	{
		width: "1000px",
		title: "基于骑乘人第一落地点计算车速",
		label: "1"
	},
	{
		width: "750px",
		title: "根据制动痕迹计算车速",
		label: "2"
	},
	{
		title: "基于典型事故形态车速计算",
		label: "",
		width: "1000px",
		children: [
			{
				width: "800px",
				title: "摩托车碰撞汽车侧面且汽车碰撞后侧向运动状态改变",
				label: "3"
			},
			{
				width: "1000px",
				title: "汽车与二轮摩托车或自行车质心侧面碰撞",
				label: "4"
			},
			{
				width: "800px",
				title: "汽车与二轮摩托车或自行车质心的前侧侧面碰撞",
				label: "5"
			},
			{
				width: "800px",
				title: "汽车与自行车追尾碰撞",
				label: "6"
			}
		]
	},
	{
		title: "不确定性分析",
		label: "",
		width: "1000px",
		children: [
			{
				width: "800px",
				title: "上下界法",
				label: "",
				children: [
					{
						width: "1000px",
						title: "根据制动痕迹计算公式",
						label: "7"
					},
					{
						width: "1000px",
						title: "汽车与自行车追尾碰撞",
						label: "8"
					}
				]
			},
			{
				width: "800px",
				title: "不确定度理论法",
				label: "",
				children: [
					// {
					// 	width: "1000px",
					// 	title: "基于骑乘人第一落地点计算车速",
					// 	label: "9"
					// },
					{
						width: "1000px",
						title: "根据制动痕迹计算车速",
						label: "10"
					},
					{
						width: "1000px",
						title: "摩托车碰撞汽车侧面且汽车碰撞后侧向运动状态改变",
						label: "11"
					},
					{
						width: "1000px",
						title: "汽车与二轮摩托车或自行车质心侧面碰撞",
						label: "12"
					},
					{
						width: "1000px",
						title: "汽车与二轮摩托车或自行车质心的前侧侧面碰撞",
						label: "13"
					},
					{
						width: "1000px",
						title: "汽车与自行车追尾碰撞",
						label: "14"
					}
				]
			},
			{
				width: "800px",
				title: "蒙特卡洛法",
				label: "",
				children: [
					{
						width: "1000px",
						title: "基于骑乘人第一落地点计算车速",
						label: "15"
					},
					{
						width: "1000px",
						title: "根据制动痕迹计算车速",
						label: "16"
					},
					{
						width: "1000px",
						title: "摩托车碰撞汽车侧面且汽车碰撞后侧向运动状态改变",
						label: "17"
					},
					{
						width: "1000px",
						title: "汽车与二轮摩托车或自行车质心侧面碰撞",
						label: "18"
					},
					{
						width: "1000px",
						title: "汽车与二轮摩托车或自行车质心的前侧侧面碰撞",
						label: "19"
					},
					{
						width: "1000px",
						title: "汽车与自行车追尾碰撞",
						label: "20"
					}
				]
			}
		]
	}
];

const defaultProps = {
	children: "children",
	label: "label"
};
</script>
